import React, { useState } from 'react';
import { Card, Tabs, Form, Input, Button, message } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { setUserInfo } from '../../store/slices/userSlice';
import { api } from '../../api';
import './style.scss';

const { TabPane } = Tabs;

const Profile = () => {
  const [loading, setLoading] = useState(false);
  const { userInfo } = useSelector(state => state.user);
  const dispatch = useDispatch();

  // 更新个人信息
  const handleUpdateInfo = async (values) => {
    setLoading(true);
    try {
      await api.updateUserInfo(values);
      dispatch(setUserInfo({ ...userInfo, ...values }));
      message.success('个人信息更新成功');
    } catch (error) {
      message.error('更新失败：' + error.message);
    } finally {
      setLoading(false);
    }
  };

  // 修改密码
  const handleUpdatePassword = async (values) => {
    setLoading(true);
    try {
      await api.updatePassword(values);
      message.success('密码修改成功');
    } catch (error) {
      message.error('修改失败：' + error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="profile-page">
      <Card>
        <Tabs defaultActiveKey="1">
          <TabPane tab="个人信息" key="1">
            <Form
              layout="vertical"
              initialValues={userInfo}
              onFinish={handleUpdateInfo}
            >
              <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true }]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                label="昵称"
                name="nickName"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" loading={loading}>
                  保存修改
                </Button>
              </Form.Item>
            </Form>
          </TabPane>

          <TabPane tab="修改密码" key="2">
            <Form layout="vertical" onFinish={handleUpdatePassword}>
              <Form.Item
                label="原密码"
                name="oldPwd"
                rules={[{ required: true }]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item
                label="新密码"
                name="newPwd"
                rules={[{ required: true }]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item
                label="确认新密码"
                name="confirmPwd"
                rules={[
                  { required: true },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (!value || getFieldValue('newPwd') === value) {
                        return Promise.resolve();
                      }
                      return Promise.reject('两次输入的密码不一致');
                    },
                  }),
                ]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" loading={loading}>
                  修改密码
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default Profile;
